<template>
	<view class="container" :class="themeClass">
		<view class="header">
			<text class="title">设置中心</text>
			<text class="subtitle">管理你的应用偏好和安全设置</text>
		</view>
		<view v-if="isOffline" class="offline-banner">
			<text>当前为离线模式</text>
		</view>
		<view class="settings-list">
			<view class="setting-item">
				<text class="item-label">主题模式</text>
				<view class="theme-selector">
					<view 
						class="theme-option" 
						:class="{ active: themeIndex === 0 }"
						@click="selectTheme(0)"
					>
						跟随系统
					</view>
					<view 
						class="theme-option" 
						:class="{ active: themeIndex === 1 }"
						@click="selectTheme(1)"
					>
						浅色
					</view>
					<view 
						class="theme-option" 
						:class="{ active: themeIndex === 2 }"
						@click="selectTheme(2)"
					>
						深色
					</view>
				</view>
			</view>
			<view class="setting-item">
				<text class="item-label">自动锁定</text>
				<switch :checked="autoLock" @change="onAutoLockChange" />
			</view>
			<view class="setting-item">
				<text class="item-label">指纹/面容解锁</text>
				<switch :checked="biometric" @change="onBiometricChange" />
			</view>
			<view class="setting-item">
				<text class="item-label">离线模式</text>
				<switch :checked="isOffline" @change="onOfflineChange" />
			</view>
			<view class="setting-item">
				<text class="item-label">数据清理</text>
				<button class="danger-btn" @click="clearAllData">清空所有本地数据</button>
			</view>
			<view class="setting-item">
				<text class="item-label">关于</text>
				<view class="item-value">密码管理工具箱 v1.0</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			themeIndex: 0,
			autoLock: false,
			biometric: false,
			currentTheme: 'light',
			isOffline: false
		}
	},
	computed: {
		themeClass() {
			return `theme-${this.currentTheme}`
		}
	},
	onLoad() {
		this.loadSettings()
	},
	onShow() {
		// 监听全局主题变化
		this.currentTheme = getApp().globalData.currentTheme || 'light'
		this.isOffline = uni.getStorageSync('setting_isOffline')||false;
	},
	methods: {
		loadSettings() {
			try {
				const themeIndex = uni.getStorageSync('setting_themeIndex') || 0
				const autoLock = uni.getStorageSync('setting_autoLock') || false
				const biometric = uni.getStorageSync('setting_biometric') || false
				const isOffline = uni.getStorageSync('setting_isOffline')||false;
				this.isOffline = isOffline
				this.themeIndex = Number(themeIndex)
				this.autoLock = autoLock
				this.biometric = biometric

				console.log('加载设置，主题索引:', this.themeIndex)
				this.applyTheme(this.themeIndex)
			} catch (error) {
				console.error('加载设置失败:', error)
			}
		},
		
		selectTheme(index) {
			try {
				console.log('选择主题，索引:', index)
				this.themeIndex = index
				uni.setStorageSync('setting_themeIndex', this.themeIndex)
				this.applyTheme(this.themeIndex)
				uni.showToast({ title: '主题已切换', icon: 'none' })
			} catch (error) {
				console.error('主题切换失败:', error)
				uni.showToast({ title: '主题切换失败', icon: 'none' })
			}
		},
		
		applyTheme(themeIndex) {
			try {
				console.log('应用主题，索引:', themeIndex)
				let theme = 'light'
				
				if (themeIndex === 0) {
					// 跟随系统
					uni.getSystemInfo({
						success: (res) => {
							theme = res.theme || 'light'
							console.log('系统主题:', theme)
							this.setTheme(theme)
						},
						fail: () => {
							console.log('获取系统主题失败，使用默认浅色')
							this.setTheme('light')
						}
					})
				} else if (themeIndex === 1) {
					theme = 'light'
					console.log('设置为浅色主题')
					this.setTheme(theme)
				} else if (themeIndex === 2) {
					theme = 'dark'
					console.log('设置为深色主题')
					this.setTheme(theme)
				} else {
					console.log('未知主题索引，使用默认浅色')
					this.setTheme('light')
				}
				uni.setStorageSync('setting_themeValue',theme)
			} catch (error) {
				console.error('应用主题失败:', error)
			}
		},
		
		setTheme(theme) {
			try {
				console.log('设置主题为:', theme)
				this.currentTheme = theme
				
				// 更新全局主题
				getApp().setTheme(theme)
				
				// H5 环境设置 document
				if (typeof document !== 'undefined' && document.documentElement) {
					document.documentElement.setAttribute('data-theme', theme)
					console.log('主题属性已设置到 document')
				}
			} catch (error) {
				console.error('设置主题失败:', error)
			}
		},
		
		onAutoLockChange(e) {
			try {
				this.autoLock = e.detail.value
				uni.setStorageSync('setting_autoLock', this.autoLock)
			} catch (error) {
				console.error('设置自动锁定失败:', error)
			}
		},
		
		onBiometricChange(e) {
			try {
				this.biometric = e.detail.value
				uni.setStorageSync('setting_biometric', this.biometric)
			} catch (error) {
				console.error('设置生物识别失败:', error)
			}
		},

		onOfflineChange(e) {
			try {
				this.isOffline = e.detail.value
				getApp().globalData.isOffline = this.isOffline
				uni.setStorageSync('setting_isOffline', this.isOffline);
				uni.showToast({ title: this.isOffline ? '已切换为离线模式' : '已切换为在线模式', icon: 'none' })
			} catch (error) {
				console.error('切换离线模式失败:', error)
				uni.showToast({ title: '切换离线模式失败', icon: 'none' })
			}
		},
		
		clearAllData() {
			uni.showModal({
				title: '警告',
				content: '确定要清空所有本地数据吗？此操作不可恢复！',
				confirmColor: '#ff3b30',
				success: (res) => {
					if (res.confirm) {
						try {
							uni.clearStorageSync()
							uni.showToast({ title: '数据已清空', icon: 'success' })
						} catch (error) {
							console.error('清空数据失败:', error)
							uni.showToast({ title: '清空数据失败', icon: 'none' })
						}
					}
				}
			})
		}
	}
}
</script>

<style>
/* 浅色主题样式 */
.theme-light {
	--bg-color: #f5f5f5;
	--text-color: #333;
	--card-bg: #fff;
	--card-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	--border-color: #f0f0f0;
	--primary-color: #007aff;
	--danger-color: #ff3b30;
}

/* 深色主题样式 */
.theme-dark {
	--bg-color: #1a1a1a;
	--text-color: #ffffff;
	--card-bg: #2d2d2d;
	--card-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
	--border-color: #404040;
	--primary-color: #4f8cff;
	--danger-color: #ff5c5c;
}

/* 应用主题变量 */
.container {
	padding: 30rpx;
	min-height: 100vh;
	background: var(--bg-color);
}

.header {
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	color: var(--text-color);
}

.subtitle {
	font-size: 28rpx;
	color: var(--text-color);
	opacity: 0.7;
	margin-top: 10rpx;
}

.settings-list {
	background: var(--card-bg);
	border-radius: 16rpx;
	padding: 20rpx;
	box-shadow: var(--card-shadow);
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 1rpx solid var(--border-color);
}

.setting-item:last-child {
	border-bottom: none;
}

.item-label {
	font-size: 28rpx;
	color: var(--text-color);
}

.item-value {
	font-size: 26rpx;
	color: var(--text-color);
	opacity: 0.7;
}

.danger-btn {
	background: var(--danger-color);
	color: #fff;
	border: none;
	border-radius: 8rpx;
	padding: 10rpx 20rpx;
	font-size: 26rpx;
}

/* 主题选择器样式 */
.theme-selector {
	display: flex;
	gap: 10rpx;
}

.theme-option {
	padding: 10rpx 20rpx;
	border: 1rpx solid var(--border-color);
	border-radius: 8rpx;
	font-size: 24rpx;
	color: var(--text-color);
	background: var(--card-bg);
	transition: all 0.3s ease;
}

.theme-option.active {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

.offline-banner {
	background: #fffae6;
	color: #d48806;
	text-align: center;
	padding: 10rpx 0;
	font-size: 26rpx;
}
</style> 